<template>
  <div>
    <a-modal
      title="任务修改"
      :width="500"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <a-spin :spinning="confirmLoading">
        <a-form
          :form="form"
          layout="vertical"
        >
          <a-form-item style="display: none">
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-form-item style="display: none">
            <a-input v-decorator="['classId']" />
          </a-form-item>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="任务标题："
                has-feedback
              >
                <a-input v-model="details.title" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item label="任务介绍：">
                <a-textarea
                  :rows="4"
                  v-model="details.taskIntroduction"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="上传图片："
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <div class="clearfix">
                  <div v-if="ImageList.length">
                    <div
                      class="img-border-div"
                      v-for="(item, index) in ImageList"
                      :key="index"
                    >
                      <img
                        class="u-img"
                        :src="item.src"
                        alt="img"
                      >
                      <div class="img-b-div">
                        <a-icon
                          class="eye-a"
                          type="eye"
                          @click="handlePreview(item)"
                        />
                        <a-icon
                          class="delete-a"
                          type="delete"
                          @click="deleteImg(index)"
                        />
                      </div>
                    </div>
                  </div>
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                  >
                    <div v-if="ImageList.length < 9">
                      <a-icon type="plus" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                  <a-modal
                    :visible="previewVisible"
                    :footer="null"
                    @cancel="handlePreviewCancel"
                  >
                    <img
                      alt="example"
                      style="width: 100%"
                      :src="previewImage"
                    >
                  </a-modal>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item
            label="发布班级："
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <span>{{ className }}</span>
          </a-form-item>
          <a-form-item
            label="打卡天数："
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input v-model="details.clockInDays" />
          </a-form-item>
          <a-form-item label="开始时间：">
            <a-date-picker
              v-model="details.startDate"
              format="YYYY-MM-DD HH:mm:ss"
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            />
          </a-form-item>
          <a-form-item label="结束时间：">
            <a-date-picker
              v-model="details.endDate"
              format="YYYY-MM-DD HH:mm:ss"
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            />
          </a-form-item>
          <a-form-item label="每日打卡截止时间：">
            <a-date-picker
              v-model="details.dailyClockInDeadline"
              format="YYYY-MM-DD HH:mm:ss"
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { editParentChildTasks } from '@/api/modular/garden/parentchildtasks'
import { getUuid } from '@/utils/util'
import moment from 'moment'
export default {
  data() {
    return {
      moment,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 20 },
      },
      visible: false,
      confirmLoading: false,
      fileList: [],
      form: this.$form.createForm(this),
      previewVisible: false,
      previewImage: '',
      ImageList: [],
      className: undefined,
      details: {},
    }
  },
  methods: {
    edit(record) {
      this.visible = true
      record.startDate = moment(moment(record.startDate).format('YYYY-MM-DD HH:mm:ss'))
      record.endDate = moment(moment(record.endDate).format('YYYY-MM-DD HH:mm:ss'))
      record.dailyClockInDeadline = moment(moment(record.dailyClockInDeadline).format('YYYY-MM-DD HH:mm:ss'))
      this.details = record
      this.className = record.className
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id: record.id,
          classId: record.classId,
        })
      })
    },
    async beforeUpload(file, fileList) {
      let src = await this.fileToBase64(file)
      file.src = src
      file.id = getUuid()
      this.ImageList.push(file)
      return false
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          resolve(e.target.result)
        }
      })
    },
    handlePreviewCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.src && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.src || file.preview
      this.previewVisible = true
    },
    deleteImg(index) {
      this.ImageList.splice(index, 1)
    },
    handleChange({ fileList }) {
      this.ImageList = fileList
    },
    handleCancel() {
      this.visible = false
    },
    handleSubmit() {
      const {
        form: { validateFields },
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        let imageIdList = this.ImageList.map((item) => {
          return item.id
        })
        const obj = {
          id: values.id,
          title: this.details.title,
          taskIntroduction: this.details.taskIntroduction,
          classId: values.classId,
          clockInDays: this.details.clockInDays,
          startDate: moment(this.details.startDate).format('YYYY-MM-DD HH:mm:ss'),
          endDate: moment(this.details.endDate).format('YYYY-MM-DD HH:mm:ss'),
          dailyClockInDeadline: moment(this.details.dailyClockInDeadline).format('YYYY-MM-DD HH:mm:ss'),
          imageIdList: imageIdList,
        }
        if (!errors) {
          editParentChildTasks(obj)
            .then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.ImageList = []
                this.$emit('ok')
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.text-t {
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 16px;
}
.mg-r {
  margin-right: 20px;
}

.mg-l {
  margin-left: 45px;
}
.img-b-div {
  display: none;
}
.img-border-div {
  float: left;
  width: 104px;
  height: 104px;
  position: relative;
  margin-right: 8px;
  margin-bottom: 8px;
  border: 1px solid #dddddd;
  &:hover {
    .img-b-div {
      display: block;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
  }
}
.eye-a {
  position: absolute;
  left: 25px;
  top: 45%;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    font-size: 16px;
  }
}
.delete-a {
  position: absolute;
  left: 60px;
  top: 45%;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    font-size: 16px;
    color: #ff0000;
  }
}
.u-img {
  display: inline-block;
  height: 100%;
  width: 100%;
}
.clearfix {
  overflow: hidden;
}
.avatar-uploader {
  float: left;
}
</style>